<template>
  <div class="alert__wrap" @click="handleClick">
    <van-icon :name="currentSeverity.icon" :color="currentSeverity.color" size="24" />
    <p class="alert__text">{{ text }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop} from 'vue-property-decorator';

@Component
export default class Alert extends Vue {
  @Prop({ default: 'info' }) severity!: string;
  @Prop({ default: '' }) text!: string;

  private config = [{
    severity: 'info',
    color: '#1890ff',
    icon: 'info',
  }, {
    severity: 'success',
    color: '#52c41a',
    icon: 'checked',
  }, {
    severity: 'error',
    color: '#ff4d4f',
    icon: 'clear',
  }]

  private get currentSeverity() {
    const _config = this.config.find(item => item.severity === this.severity);
    if (!_config) return this.config[0];
    return _config;
  }

  handleClick() {
    this.$emit('click');
  }
}
</script>

<style lang="scss" scoped>
  .alert {
    &__wrap {
      background: #fff;
      border: 1px solid #eff3f7;
      border-radius: 6px;
      box-shadow: 0 1px 2px 0 rgba(239, 243, 247, 0.8);
      padding: 12px 16px;
      margin: 0 28px 10px 22px;
      color: $font-color;
      font-size: 16px;
      display: flex;
      line-height: 24px;
    }
    &__text {
      margin-left: 8px;
    }
  }
</style>
